<template>
  <div class="ckerk_henji__">
    <div
      style="
        width: 100%;
        height: 32px;
        background: #f5f9ff;
        border-radius: 4px 4px 4px 4px;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #3d8dff;
      ">
      痕迹
    </div>
    <div class="henji___">
      <div class="henji_history___">
        <div>
          <div class="henji_title___">1.曾经的消费品项和金额</div>
          <el-input
            v-model="clkFanganObj.bb1"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">2.曾经的消费习惯</div>
          <el-input
            v-model="clkFanganObj.bb2"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">3.当前正在消费和未消费明细</div>
          <el-input
            v-model="clkFanganObj.bb3"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">4.性格主观评价</div>
          <el-input
            v-model="clkFanganObj.bb4"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">5.工作和事业状态</div>
          <el-input
            v-model="clkFanganObj.bb5"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">6.财富信息（车，房）</div>
          <el-input
            v-model="clkFanganObj.bb6"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">7.感情状态</div>
          <el-input
            v-model="clkFanganObj.bb7"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">8.爱好（捕捉到的信息碎片）</div>
          <el-input
            v-model="clkFanganObj.bb8"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">9.沟通中品项和需求方面的反馈</div>
          <el-input
            v-model="clkFanganObj.bb9"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">10.沟通中非医美内容的反馈（生活工作等）</div>
          <el-input
            v-model="clkFanganObj.bb10"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">11.团队对这位顾客的判断</div>
          <el-input
            v-model="clkFanganObj.bb11"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">12.希望成交金额和原因</div>
          <el-input
            v-model="clkFanganObj.bb12"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
          <div class="henji_title___">13.咨询认为怎么攻克比较好</div>
          <el-input
            v-model="clkFanganObj.bb13"
            placeholder="请输入"
            style="width: 579px; height: 46px; border-radius: 8px 8px 8px 8px; margin: 16px 0"></el-input>
        </div>
      </div>
      <div class="henji_update___">
        <div style="margin: 10px; text-align: center">
          <el-button type="primary" size="small" style="width: 100px; margin-top: 10px" @click.stop="subBaobiaodan">
            提交
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getFanganByCid, saveFangan } from '@/api/ym';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const ClkFanganDefault = {
  cid: undefined,
  bb1: '',
  bb2: '',
  bb3: '',
  bb4: '',
  bb5: '',
  bb6: '',
  bb7: '',
  bb8: '',
  bb9: '',
  bb10: '',
  bb11: '',
  bb12: '',
  bb13: '',
};

export default {
  name: 'ClerkHenji',
  components: {},
  data() {
    return {
      clkFanganObj: ClkFanganDefault,
    };
  },
  computed: {
    ...mapGetters(['openId', 'name', 'id']),
  },
  methods: {
    handleClosePage() {
      this.$emit('closed', 'closed');
    },
    getConsumerFangan: async function (id) {
      this.clkFanganObj = Object.assign({}, ClkFanganDefault);
      this.clkFanganObj.cid = id;
      const errAlertMsg = '获取痕迹失败';
      getFanganByCid(id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.clkFanganObj.id = ret.id;
            this.clkFanganObj.cid = ret.cid;
            this.clkFanganObj.bb1 = ret.bb1;
            this.clkFanganObj.bb2 = ret.bb2;
            this.clkFanganObj.bb3 = ret.bb3;
            this.clkFanganObj.bb4 = ret.bb4;
            this.clkFanganObj.bb5 = ret.bb5;
            this.clkFanganObj.bb6 = ret.bb6;
            this.clkFanganObj.bb7 = ret.bb7;
            this.clkFanganObj.bb8 = ret.bb8;
            this.clkFanganObj.bb9 = ret.bb9;
            this.clkFanganObj.bb10 = ret.bb10;
            this.clkFanganObj.bb11 = ret.bb11;
            this.clkFanganObj.bb12 = ret.bb12;
            this.clkFanganObj.bb13 = ret.bb13;
          }
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        });
    },
    subBaobiaodan() {
      const errAlertMsg = '保存痕迹失败';
      saveFangan(this.clkFanganObj).then(res => {
        if (res.data.status !== apiSts.ResponseOK) {
          if (res.data.message) {
            MessageBox.alert(res.data.message);
          } else {
            MessageBox.alert(errAlertMsg);
          }
          return;
        }
        this.handleClosePage();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/scrollbar.scss';

.ckerk_henji__ {
  width: 100%;
  padding: 10px 10px;
  display: block;
  background: none;

  .henji___ {
    width: 100%;
    height: 100vh;
    background-color: beige;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    ul {
      padding-inline-start: 10px;
    }

    .henji_history___ {
      width: 100%;
      height: 85vh;
      padding: 0 10px 0 0;
      display: block;
      overflow-x: hidden;
      overflow-y: scroll;
      background: linear-gradient(to bottom, #e5e8ed, #efeff1);
      border: 1px solid #e5e8ed;
      border-radius: 5px 5px 0 0;

      .henji_title___ {
        font-weight: 400;
        font-size: 17px;
        color: #333333;
      }
    }

    .henji_update___ {
      width: 100%;
      height: 15vh;
      padding: 0 0 5px 0;
      display: block;
      background: linear-gradient(to bottom, #efeff1, #e5e8ed);
      border: 1px solid #e5e8ed;
      border-radius: 0 0 5px 5px;
    }
  }
}
</style>
